微信小程序扩展组件·row/col 组件

#微信小程序扩展组件·row/col 组件| 来源: 网络整理| 查看: 265

row/col 组件

按照栅格化布局思路，再加上响应式布局的特性，提供了 row/col 两个基础布局组件，用来帮助开发者快速适配多屏应用。

核心概念是将整个屏幕宽度分为 24 单位，每个单位的大小，由当前屏幕尺寸决定的。例如 375px 的屏幕宽度，那么 1 unit = 375/24 px.

使用方法npm 安装npm i @miniprogram-component-plus/col --save npm i @miniprogram-component-plus/row --save 开发者工具构建 npm，勾选“使用 npm 模块”，参考 npm 支持页面 json 文件中加入 usingComponents 字段{ "usingComponents": { "mp-col": "@miniprogram-component-plus/col", "mp-row": "@miniprogram-component-plus/row" } } 在页面中使用组件三列均分布局 row 组件属性

默认无

col 组件属性属性类型默认值必填说明spannumber24否当前 col 所占屏幕宽度的份数offsetnumber0否距 row 左侧偏移margin 距离pushnumber0否距左侧偏移的单位距离pullnumber0否距右侧偏移的单位距离xsnumber, Object否当屏幕 < 768px 时，对应显示的网格规则。例如 xs="2" 或 xs="{ "span": 24, "offset": 0 }"smnumber, Object否当屏幕 >= 768px, = 992px, = 1200px, = 1920px 时，对应显示的网格规则。

提示：

同时设置 span 和响应式属性时，当屏幕超过响应式属性范围时，会使用 span 属性。

【本文地址】

公司简介

联系我们

微信小程序 扩展组件·row/col 组件

微信小程序扩展组件·row/col 组件